<template>
    <el-dialog v-if="dialogVisible" :close-on-click-modal='false' title="规则组" :visible.sync="dialogVisible" @close="resetForm()" width="600px">
        <AddStrategyRules ref="strategrRef" @getRulesData="getRulesData"/>
        <div>
            <div class="flexbox flexcenter flexbetween">
                <span class="font_14 color_01">已添加规则组</span>
                <el-button plain icon="el-icon-circle-plus-outline" class="plain_blue" size="small" @click="addStrategyRules">添加规则组</el-button>
            </div>
            <el-table :data="tableData" class="com_table" height="320px" style="margin-top:16px" ref="planRef">
                <div slot="empty" class="flexbox flexcenter flexcolumn flexjust" style="height:300px">
                    <img src="../../assets/img/null_icon.svg" alt="">
                    <div class="font_13 color_03">暂无数据，请添加规则组</div>
                </div>
                <el-table-column prop="group_name" label="规则组名称">
                </el-table-column>
                <el-table-column label="操作" width="120">
                    <template slot-scope="scope">
                        <el-link type="primary" :underline="false" @click="editRulesList(scope.row,scope.$index)">编辑</el-link>
                        <!-- <el-link type="danger" :underline="false" style="margin-left:10px" @click="deletRulesList(scope.$index)">删除</el-link> -->
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- <span slot="footer" class="dialog-footer">
            <el-button size="small" @click="resetForm()" class="el-button-width">取 消</el-button>
            <el-button size="small" type="primary" @click="submitForm()" class="el-button-width">保 存</el-button>
        </span> -->
    </el-dialog>
</template>

<script>
import AddStrategyRules from './AddStrategyRules'
export default {
    name: "",
    data() {
        return {
            type:null,
            editIndex:null,
            dialogVisible:false,
            tableData: [],
        };
    },
    created() {
        
    },
    methods: {
        // 添加规则组
        addStrategyRules(){
            this.$refs.strategrRef.dialogVisible = true
            this.$refs.strategrRef.type = 1
            this.type = 1
        },
        getRulesData(data){
            if(this.type==1){
                this.tableData.push(data)
                this.submitForm()
            }else{
                this.tableData[this.editIndex] = data
                this.submitForm()
            }
        },

        // 编辑规则组
        editRulesList(row,index){
            this.$refs.strategrRef.dialogVisible = true
            this.$refs.strategrRef.addRuleGroupForm = row
            this.$refs.strategrRef.type = 2
            this.editIndex = index
            this.type = 2
        },


        // 删除规则组
        deletRulesList(index){
            this.tableData.splice(index,1)
        },

        // 保存
        submitForm() {
            this.$emit('getRulesData',this.tableData)
            // if(this.tableData.length>0){
            //     this.$emit('getRulesData',this.tableData)
            // }else{
            //     this.$message.error('请添加规则组！');
            //     return
            // }
        },

        // 关闭重置表单
        resetForm() {
            this.dialogVisible = false;
        },
    },
    components: {
        AddStrategyRules
    },
};
</script>


<style scoped>
</style>
